<template>
  <div >
    <div style="margin: 20px 0">
      <el-button type="primary" style="margin: 10px" @click="add()">新增</el-button>
      <el-input v-model="search" placeholder="输入名字查询" style="width: 100px"/>
      <el-button>按名字查询</el-button>
    </div>


      <el-table :data="tableData"
                border
                stripe
                style="width: 100%">
        <el-table-column prop="date" label="Date" width="150" sortable/>
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
        <el-table-column  label="Operations" width="120">
          <template #default>
            <el-button type="text" @click="handleEdit"
            >编辑</el-button
            >
            <el-button type="text" size="small" @click="handleDelete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <div class="demo-pagination-block">
      <span class="demonstration">跳转至</span>
      <el-pagination
              v-model:currentPage="currentPage1"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

  </div>
<!--  弹窗-->
    <el-dialog v-model="dialogFormVisible" title="新增">
      <el-table :data="form">
        <el-table-column
                property="date"
                label="看i管理"
                width="150"
        ></el-table-column>
        <el-table-column
                property="name"
                label="Name"
                width="200"
        ></el-table-column>
        <el-table-column property="address" label="Address"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- Form -->
    <el-dialog v-model="dialogTableVisible" title="新增一个方龙的小弟">
      <el-form :model="form">
        <el-form-item label="日期" :label-width="100">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="100">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地级市" :label-width="100">
        <el-input v-model="form.state" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="城市" :label-width="100">
        <el-input v-model="form.city" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="地址" :label-width="100">
        <el-input v-model="form.address" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="压缩包" :label-width="100">
        <el-input v-model="form.zip" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="标签" :label-width="100">
        <el-input v-model="form.tag" autocomplete="off"></el-input>
      </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false,save()">确认</el-button
        >
      </span>
      </template>
    </el-dialog>
  </template>




<script >
  import { ref ,defineComponent, reactive, toRefs } from 'vue'
  import request from "../utils/request";


  export default {
      name: 'Home',
      components: {
      },
    data() {
      return {
        formLabelWidth: '120px',
        dialogTableVisible: false,
        dialogFormVisible: false,
        gridData: [
          {
            date: '2016-05-02',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
          },
          {
            date: '2016-05-04',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
          },
          {
            date: '2016-05-01',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
          },
          {
            date: '2016-05-03',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
          },
        ],
        form: {},
        currentPage1: ref(1),
        search: '',
        tableData: [
          {
            date: '2016-05-03',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
            tag: 'Home',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
            tag: 'Office',
          },
          {
            date: '2016-05-04',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
            tag: 'Home',
          },
          {
            date: '2016-05-01',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
            tag: 'Office',
          },
        ],

      }
    },
    methods: {
        add(){
          this.dialogTableVisible = true;
        },
      save(){

        request.post("/user",this.form).then(res => {
          console.log('触发了新增')
          console.log(res)
          })
      },
        handleSizeChange(){

        },
        handleCurrentChange(){

        },
      handleEdit() {
        console.log('edit')
      },
        handleDelete() {
            console.log('delete')
        },
    },
  }
</script>

